<template>
  <div>
    <el-container id="initem">
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :router="true"
        >
          <el-submenu :index="val.cat_id" v-for="(val, key) in menu" :key="key">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ val.cat_name }}</span>
            </template>
            <el-submenu
              :index="va.cat_id"
              v-for="(va, k) in val.children"
              :key="k"
            >
              <template slot="title">{{ va.cat_name }}</template>
              <el-menu-item
                :index="va.cat_id"
                v-for="(vaa, ke) in va.children"
                :key="ke"
                >{{ vaa.cat_name }}</el-menu-item
              >
            </el-submenu>
          </el-submenu>

           <el-menu-item-group>  
              <el-menu-item
                :index="va.path"
                v-for="(va, k) in val.children"
                :key="k"
                ><span>{{ va.cat_name }}</span>
                
                </el-menu-item
              >
            </el-menu-item-group> -->
        <!-- </el-menu> -->
      </el-aside>
      <el-main>
        <div class="top">
          <el-input
            v-model="input"
            placeholder="输入商品id具体查询"
            style="width: 200px; line-height: 50px; border-radius: 30px"
          ></el-input>
          <el-button type="primary" round @click="search">搜索</el-button>
          <ul id="in">
            <li>商品id：{{ idData.cat_id }}</li>
            <li>商品名：{{ idData.cat_name }}</li>
            <li>商品pid：{{ idData.cat_pid }}</li>
          </ul>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="val.cat_name"
            :name="val.id"
            v-for="(val, key) in menu"
            :key="key"
          >
            <el-tabs v-model="activeName2" @tab-click="handleClick1">
              <el-tab-pane
                :label="v.cat_name"
                :name="v.id"
                v-for="(v, k) in val.children"
                :key="k"
                ><ul id="ul" ref="ul">
                  <li v-for="(x, y) in v.children" :key="y">
                    <p>{{ x.cat_name }}</p>
                    <p>{{ x.id }}</p>
                    <p>{{ x.cat_pid }}</p>
                    <el-checkbox
                      v-model="x.cat_deleted"
                      style="width: 20px"
                    ></el-checkbox>
                  </li></ul
              ></el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "VueGoods",

  data() {
    return {
      menu: {},
      activeName: "",
      activeName2: "",
      input: "",
      idData: {},
    };
  },

  async mounted() {
    if (localStorage.getItem("userinfo")) {
      //侧边栏
      const { data } = await this.$axios.get("/categories");
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.menu = data.data;
      } else {
        this.$message.error(data.meta.message);
      }
    }
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick1(tab, event) {
      console.log(tab, event);
    },
    async search() {
      const { data } = await this.$axios.get("/categories/" + this.input);
      console.log(data);
      this.idData = data.data;
      this.$message({
        message: data.meta.msg,
        type: "success",
      });
    },
  },
};
</script>

<style lang="css">
#initem {
  height: 860px;
}
#ul > li {
  list-style: none;
  line-height: 40px;
  width: 150px;
  float: left;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#ul > p {
  line-height: 40px;
}
.top {
  display: flex;
  height: 50px;
  /* border: rgb(233, 67, 67) solid 1px; */
  border-radius: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#in {
  /* border: rgb(233, 67, 67) solid 1px; */
  line-height: 50px;
}
#in > li {
  float: left;
  width: 200px;
  list-style: none;
}
</style>